<!DOCTYPE html>
<html style="width:100%;height:100%;">
<style>
    .tablet {
        justify-content:space-around;
        display:flex;
        margin-left:130px;
        margin-right:130px;
        margin-top:90px;
        flex-wrap: wrap
    }
    .searchArea {
        min-width: 300px;
        font-size: 1.9rem;
        position: relative;
        height: 53px;
        margin: 0 auto;
        box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
        width: 64%;
        margin-top: 8%;
        z-index: 4;
    }
    .searchFirm {
        width: 33px;
        height: 33px;
        float: left;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        position: absolute;
        left: 10px;
        z-index: 2;
    }
    .searchFirmIcon {
        width: 20px;
        height: 20px;
        margin: 16px auto ;
        cursor: pointer;
        background-position: 24px -24px;
        background-size: 20px;
        background-repeat: no-repeat;
    }
    .sfBaidu {
        background-position: 0 -40px;
    }

    #searchCon {
        height: 100%;
        background: transparent;
        float: left;
        border: none;
        margin: 0 33px 0 0;
        width: calc(100% - 80px);
        font-size: 18px;
        z-index: 2;
        position: absolute;
        right: 0;
        outline: none;
    }
</style>
<script>
	function initPad() {
	    this.isPhone = false;
		func1();
	}
	function adapterDevice() {
	    console.info('function adapterDevice');
	    let v = document.querySelector('meta[name="viewport"]');
        if (v) {
            v.setAttribute('content', 'width=720, user-scalable=yes');
        } else {
            let m = document.createElement('meta');
            m.content = 'width=720, user-scalable=yes';
            m.name = 'viewport';
            document.getElementsByTagName('head')[0].appendChild(m);
        }
	}
    function func1() {
        let array = [{src: './bing.png', name:'必应', addr: 'bing.com'},
             {src: './12306.png', name: '12306', addr: 'www.12306.cn'},
             {src: './dianping.png', name: '大众点评', addr:'www.dianping.com'},
             {src: './sina.png', name: '新浪新闻', addr:'news.sina.com.cn/'},
             {src: './jingdong.png', name: '京东', addr:'www.jd.com'},
             {src: './pinduoduo.png', name: '拼多多', addr:'www.pinduoduo.com'},
             {src: './weibo.png', name:'微博', addr: 'weibo.com/'},
             {src: './taobao.png', name:'淘宝', addr: 'www.tmall.com'},
             {src: './weipinhui.png', name:'唯品会', addr:'www.vip.com'},
             {src: './weixin.png', name:'微信阅读', addr:'weread.qq.com'},
             {src: './zhihu.png', name:'知乎', addr:'www.zhihu.com'},
             {src: './xiecheng.png', name:'携程', addr:'www.ctrip.com'},]
      let div = document.getElementById('test');
      div.className = isPhone ? 'phone' : 'tablet'
      for(let i = 0; i < array.length; i++) {
        let box = document.createElement('div');
		box.style.display = 'flex';
		box.style.flexDirection = 'column';
		box.style.justifyContent = 'center';
		box.style.alignItems = 'center';
		box.style.height = '120px';
		box.style.minWidth = '100px';
		box.style.borderRadius = '15px';
		box.addEventListener('touchstart', function(e){
			box.style.backgroundColor = '#e4e4e4';
		});
		box.addEventListener('touchend', function(e){
			box.style.backgroundColor = '#00000000';
		});
        let text = document.createElement('p');
		text.innerHTML = array[i].name;
        text.style.fontSize = '13px';
        text.style.fontWeight = 400;
        let image = new Image();
        image.src = array[i].src;
        image.style.width = '48px';
		image.style.height = '48px';
        image.onclick = function() {
            console.info('image.onclick');
            etsObj.test(array[i].addr);
        }
        box.appendChild(image);
        box.appendChild(text);
        div.appendChild(box);
      }
    }
    function uploadWord() {
        let inputDom = document.getElementById('searchCon');
        console.info(`pad inputDom.value=${inputDom.value}`);
        etsObj.searchWord(inputDom.value);
    }

    function searchWord(e) {
        console.info(`searchWord keyCode=${e.keyCode}`);
        if (e.keyCode === 13) {
            let inputDom = document.getElementById('searchCon');
            console.info(`phone inputDom.value=${inputDom.value}`);
            etsObj.searchWord(inputDom.value);
            return true;
        }
        return false;
    }
 </script>
<body style="margin：0px; background-image: url(./backgroundImg.jpg);
    background-size:cover;height:98% padding-bottom:60px" onload="initPad()">
<div style="display:flex;flex-direction:column;width:100%;padding-bottom:60px">
    <div class="searchArea" style="border-radius: 20px; display: block; background-color: rgba(255, 255, 255, 0.7);flex-shrink: 0;">
        <div class="searchFirm" style="border-bottom-left-radius: 8px; border-top-left-radius: 8px;">
            <div class="searchFirmIcon sfBaidu" style="background-image: url(./all.png);">
            </div>
        </div>
        <form autocomplete="off">
            <input id="searchCon" type="text" style="border-bottom-right-radius: 8px;
                border-top-right-radius: 8px; text-align: left;" onkeyup="searchWord(event)"
                onkeypress="return event.keyCode !== 13;">
        </form>
        <div style="display:flex;height: 100%; width: 33px;position: absolute; right:9px; z-index: 3;
            align-items: center;justify-content: center;" onclick="uploadWord()">
            <img src="./search.svg" style="width: 20px; height: 20px;">
        </div>
    </div>
    <div id = "test"></div>
</div>
</body >
</html>